<template lang="html">
  <div class="OTABox">
    <el-row class="formBox box1">
        <el-col :span="2" class="text-right headLable">
          <span>订单号：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input v-model="form.orderNo" size="small" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="text-right">
          <span>产品名：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input v-model="form.productName" size="small" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="text-right">
          <span>下单时间：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-date-picker
            v-model="form.orderTime"
            size="small"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-col>
    </el-row>
    <el-row class="formBox">
      <el-col :span="2" class="text-right headLable">
        <span>客户名：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="form.userName" size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>客户手机：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="form.userPhone" size="small" placeholder="请输入内容"></el-input>
      </el-col>
    </el-row>
    <el-row class="formBox box3">
      <el-col :span="2" class="text-right headLable">
        <span>OTA平台：</span>
      </el-col>
      <el-col :span="4" >
        <el-select v-model="form.OTA" class="text" size="small" clearable placeholder="请选择" >
          <el-option v-for="item in $store.state.OTAstation" :key="item.value" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="formBox box2">
       <el-col :span="2" :offset="2" class="text-left" style="margin-left:80px;">
         <el-button type="success" size="small" @click="find">筛选</el-button>
       </el-col>
    </el-row>
    <el-row class="tableBox" v-loading.body="$store.state.TanGoods.loading">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <ul class="listBox">
              <li class="first">
                <span class="order gray">订单号</span>
                <span class="name gray">产品名</span>
                <span class="price gray">单价</span>
                <span class="num gray">数量</span>
                <span class="pay gray">实付</span>
                <span class="customer gray">客户</span>
                <span class="OTA gray">OTA平台</span>
                <span class="reason gray">异常原因</span>
                <span class="downTime green">下单时间</span>
                <span class="type gray">订单状态</span>
              </li>
              <li v-for="item in $store.state.TanGoods.OTAList">
                <span class="order">{{item.orderNo}}<br>{{item.yzOrderNo}}</span>
                <span class="name">
                  <p>{{item.productName}}</p>
                  <p class="gray">{{item.sku}}</p>
                </span>
                <span class="price text-left">{{item.price?item.price/100:'0'}}</span>
                <span class="num text-left green">x{{item.count?item.count:'0'}}</span>
                <span class="pay text-left">{{item.payPrice?item.payPrice/100:'0'}}</span>
                <span class="customer text-left">
                  <p>{{item.customerName}}</p>
                  <p>{{item.customerPhone}}</p>
                </span>
                <span class="OTA text-left">{{item.otaPlatform}}</span>
                <span class="reason">
                  <p>{{item.otaError}}</p>
                </span>
                <span class="downTime">
                  <p>{{item.createTime | getDate}}</p>
                  <p>{{item.createTime | getTime}}</p>
                </span>
                <span class="type">{{item.otaIsError==1?'异常订单':item.statusDesc}}</span>
              </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="OTA异常订单" name="second">
          <ul class="listBox">
              <li class="first">
                <span class="order gray">订单号</span>
                <span class="name gray">产品名</span>
                <span class="price gray">单价</span>
                <span class="num gray">数量</span>
                <span class="pay gray">实付</span>
                <span class="customer gray">客户</span>
                <span class="OTA gray">OTA平台</span>
                <span class="reason gray">异常原因</span>
                <span class="downTime2 green">下单时间</span>
                <span class="type2 gray">订单状态</span>
                <span class="operation">操作</span>
              </li>
              <li v-for="item in $store.state.TanGoods.OTAList">
                <span class="order">{{item.orderNo}}<br>{{item.yzOrderNo}}</span>
                <span class="name">
                  <p>{{item.productName}}</p>
                  <p class="gray">{{item.sku}}</p>
                </span>
                <span class="price text-left">{{item.price?item.price/100:'0'}}</span>
                <span class="num text-left green">x{{item.count?item.count:'0'}}</span>
                <span class="pay text-left">{{item.payPrice?item.payPrice/100:'0'}}</span>
                <span class="customer text-left">
                  <p>{{item.customerName}}</p>
                  <p>{{item.customerPhone}}</p>
                </span>
                <span class="OTA text-left">{{item.otaPlatform}}</span>
                <span class="reason">
                  <p>{{item.otaError}}</p>
                </span>
                <span class="downTime2">
                  <p>{{item.createTime | getDate}}</p>
                  <p>{{item.createTime | getTime}}</p>
                </span>
                <span class="type2">{{item.statusDesc}}</span>
                <span class="operation green" @click="changeDialog(2,item.id)">处理</span>
              </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row class="text-right" style="margin-top:10px;">
      共{{this.$store.state.TanGoods.total}}条
      <span style="display:inline-block; min-width:100px;">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :page-count="$store.state.TanGoods.pages">
        </el-pagination>
      </span>
    </el-row>
  </div>
</template>

<script>
export default {
  data(){
    return {
      orderNumb:'',
      value2:'',
      form:{
        orderNo:'',
        OTA:'',
        productName:'',
        orderTime:'',
        userName:'',
        userPhone:''
      },
      activeName: 'first',
      options: [{
        value: '选项1',
        label: '选项1'
      }, {
        value: '选项2',
        label: '选项2'
      }, {
        value: '选项3',
        label: '选项3'
      }, {
        value: '选项4',
        label: '选项4'
      }, {
        value: '选项5',
        label: '选项5'
      }],
      page:1
    }
  },
  filters:{
    getDate:function (val){
      var date=new Date();
      date.setTime(val);
      var year = date.getFullYear();
      var month= date.getMonth()+1;
      if(month<10){
        month='0'+month;
      }
      var day=date.getDate();
      if(day<10){
        day='0'+day;
      }
      return year+"-"+month+"-"+day;
    },
    getTime:function (val){
      var date=new Date();
      date.setTime(val);
      var hours=date.getHours();
      if(hours<10){
        hours='0'+hours;
      }
      var minutes=date.getMinutes();
      if(minutes<10){
        minutes='0'+minutes;
      }
      return hours+":"+minutes
    }
  },
  methods:{
    find:function (){
      this.getList();
    },
    changeDialog:function (type,id){
      var json1={
        'type':type,
        'name':'TanGoods',
        'id':id,
        'title':'OTA详情'
      }
      console.log(json1);
      this.$store.dispatch('changeDialog',json1);
    },
    handleClick:function (){
      this.page=1;
    },
    getList:function (){
      this.$store.dispatch('showLoading','TanGoods');
      if(this.form.orderTime!=''){
        var time=this.form.orderTime.getTime()
      }else{
        var time='';
      }
      if(this.activeName=='first'){
        var status='';
      }else if(this.activeName=='second'){
        var status=-1;
      }
      var json1={
        'orderNo':this.form.orderNo,
        'orderTime':time,
        'otaPlatform':'',
        'pageCount':10,
        'pageIndex':this.page,
        'productName':this.form.productName,
        'sort':'',
        'status':status,
        'type':2,
        'userName':this.form.userName,
        'userPhone':this.form.userPhone
      };
      this.$store.dispatch('getAllGoodsList',json1);
    },
    handleCurrentChange:function (){
      this.getList();
    }
  },
  watch:{
    activeName(val){
      this.getList();
    }
  },
  created(){
    this.getList();
  }
}
</script>

<style lang="Sass" scoped>
  .OTABox{width: 100%; height: 100%;padding: 20px 10px 10px 10px; box-sizing: border-box;

    .formBox{ background: #fff; padding: 10px; text-align: left;

      .text{ height: 30px;
        .el-input__inner{height: 30px; width: 100%;}
      }
      .date{width: 150px; height: 30px;
        .el-input__inner{height: 30px; width: 100%;}
      }
      .select{width: 120px;
        .el-input__inner{width: 100%;}
      }
    }
    span{font-size: 12px; line-height: 30px;}
    .box1{border-radius: 10px 10px 0 0; padding: 20px 10px 0 10px;}
    .box2{border-radius: 0 0 10px 10px; padding: 0 10px 20px 10px;}
    .box3{padding-top:0px;}
    .tableBox{background: #fff; padding: 20px; margin-top: 20px; border-radius: 10px;}
    .cell{text-align: left;}
    .btn{height: 32px;
      span{line-height: 0px;  }
    }
  }
  .text-left{text-align: left;}
  .text-right{text-align: right;}
  .heightAll{height: 100%;}
  .listBox{width: 100%; background: #fff;

    .first{display: flex; height: 30px; line-height: 30px; text-align: left; padding: 5px;
        span{display: inline-block; line-height: 30px; }
        .order{flex: 0 0 220px;}
        .name{flex: 1;}
        .price{flex: 0 0 60px;}
        .num{flex: 0 0 80px;}
        .pay{flex: 0 0 80px;}
        .customer{flex: 0 0 100px;}
        .OTA{flex: 0 0 80px;}
        .reason{flex: 0 0 110px; }
        .downTime{flex: 0 0 120px;}
        .downTime2{flex: 0 0 80px;}
        .type{flex: 0 0 90px; }
        .type2{flex: 0 0 70px; }
        .operation{flex: 0 0 60px;}
    }
    li{display: flex; height: auto; line-height: 30px; text-align: left; padding: 15px 5px 5px 5px;

      span{display: inline-block; box-sizing: border-box; line-height: 14px; overflow: auto;}
      .order{flex: 0 0 220px; }
      .name{flex: 1;
        p{font-size: 12px; width: 92%; text-align: justify;}
      }
      .price{flex: 0 0 60px;}
      .num{flex: 0 0 80px;}
      .pay{flex: 0 0 80px;}
      .customer{flex: 0 0 100px;
        p{margin: 0 0 5px 0; width: 95%; font-size: 12px;}
      }
      .OTA{flex: 0 0 80px;}
      .reason{flex: 0 0 110px;
        p{font-size: 12px; width: 95%;} }
      .downTime{flex: 0 0 120px;
        p{margin: 0 0 5px 0; width: 95%; font-size: 12px;}
      }
      .downTime2{flex: 0 0 80px;
        p{margin: 0 0 5px 0; width: 95%; font-size: 12px;}
      }
      .type{flex: 0 0 90px; }
      .type2{flex: 0 0 70px; }
      .operation{flex: 0 0 60px; cursor: pointer;}
    }
    li:nth-of-type(odd){background: #FAFAFC;}

  }
</style>
